---
title: "Mermaid Diagrams"
---

import { Callout } from "fumadocs-ui/components/callout";
import { Step, Steps } from "fumadocs-ui/components/steps";

Render Mermaid diagrams in chat messages with the `mermaid-diagram` component.

<Steps>
  <Step>

### Add `mermaid-diagram` component

```bash
npx shadcn@latest add "https://r.assistant-ui.com/mermaid-diagram"
```

This will install the required dependencies and add the component to your project.

  </Step>
  <Step>

### Add it to `componentsByLanguage` in `markdown-text.tsx`

```tsx title="/components/assistant-ui/markdown-text.tsx"
import { MermaidDiagram } from "@/components/assistant-ui/mermaid-diagram"; // [!code ++]

const MarkdownTextImpl = () => {
  return (
    <MarkdownTextPrimitive
      remarkPlugins={[remarkGfm]}
      className="aui-md"
      components={defaultComponents}
      componentsByLanguage={{               // [!code ++]
        mermaid: {                          // [!code ++]
          SyntaxHighlighter: MermaidDiagram // [!code ++]
        },                                  // [!code ++]
      }}                                    // [!code ++]
    />
  );
};

export const MarkdownText = memo(MarkdownTextImpl);
```

  </Step>
</Steps>

## Configuration

Configure mermaid options in `mermaid-diagram.tsx`:

```tsx title="/components/assistant-ui/mermaid-diagram.tsx"
mermaid.initialize({ theme: "default" });
```

## Streaming Performance

The `MermaidDiagram` component is optimized for streaming scenarios:

- **Smart completion detection**: Only renders when the specific code block is complete
- **Zero failed renders**: Avoids parsing incomplete diagram code during streaming  


## Supported Diagram Types

Mermaid supports various diagram types including:

- Flowcharts and decision trees
- Sequence diagrams  
- Gantt charts
- Class diagrams
- State diagrams
- Git graphs
- User journey maps
- Entity relationship diagrams

See the [Mermaid documentation](https://mermaid.js.org/) for complete syntax reference.
